<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
function onEnter(el: any, done: any) {
  const delay = el.dataset.index * 200
  const animation = 'fadeInRight 0.8s infinite'
  setTimeout(() => {
    el.style.transition = 'opacity 1s '
    el.style.opacity = 1
    el.style.animation = animation
    el.style['animation-iteration-count'] = 1
    done()
  }, delay)
}
</script>

<template>
  <div ref="el" class="zuimeidianying">
    <Transition name="animate-zoomIn">
      <img v-show="show" class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/image-15.png" alt="">
    </Transition>
    <div class="content">
      <Transition name="animate-fadeInLeft">
        <img v-show="show" class="img" src="https://public-oss-file.zmaxfilm.com/website-compress/image-34.png" alt="">
      </Transition>
      <Transition name="animate-fadeInRight">
        <div v-show="show" class="flex flex-col py-[28px] space-y-[30px]">
          <p class="text-[24px] font-bold leading-none">
            最美电影
          </p>
          <p class="intro leading-[36px]">
            福建省最具规模的B端电影购票服务平台。B2B2C电影购票服务平台。集结大地院线、金逸院线、万达院线、中兴院线、中影院线、横店等各大院线，联手幸福蓝海、CGV等高端品牌合作共赢！
          </p>
        </div>
      </Transition>
      <Transition name="animate-zoomIn">
        <div v-show="show" class="float-card">
          <div class="item">
            <div class="figure">
              <span class="leading-none text-theme font-bold text-[46px]">
                <n-number-animation :from="0" :to="90" />
              </span>
              <span class="leading-none text-[20px] text-999 ml-[8px]">%+</span>
            </div>
            <span class="text-666 text-[14px]">覆盖福建院线资源</span>
          </div>
          <div class="item">
            <div class="figure">
              <span class="leading-none text-theme font-bold text-[46px]">
                <n-number-animation :from="0" :to="1000" />
              </span>
              <span class="leading-none text-[20px] text-999 ml-[8px]">万+</span>
            </div>
            <span class="text-666 text-[14px]">会员用户</span>
          </div>
          <div class="item">
            <div class="figure">
              <span class="leading-none text-theme font-bold text-[46px]">
                <n-number-animation :from="0" :to="300" />
              </span>
              <span class="leading-none text-[20px] text-999 ml-[8px]">+</span>
            </div>
            <span class="text-666 text-[14px]">支持城市</span>
          </div>
          <div class="item">
            <div class="figure">
              <span class="leading-none text-theme font-bold text-[46px]">
                <n-number-animation :from="0" :to="12000" />
              </span>
              <span class="leading-none text-[20px] text-999 ml-[8px]">+</span>
            </div>
            <span class="text-666 text-[14px]">影城综合服务平台</span>
          </div>
        </div>
      </Transition>
    </div>
    <Transition name="animate-fadeInDown">
      <div v-show="show" class="flex flex-col items-center text-[24px] font-bold leading-[36px] mt-[80px] mb-[63px]">
        <p>为政企事业单位提供互联网+福利场景化解决方案，</p>
        <p>合理优化成本开支，提供年节福利、生日慰问、企业内购、渠道搭建等服务。</p>
      </div>
    </Transition>

    <div class="flex justify-center space-x-[130px]">
      <transition-group @enter="onEnter">
        <div v-show="show" key="0" class="welfare" data-index="0">
          <img class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/image-22.png" alt="">
          <span class="text-[18px] mt-[25px]">生日慰问</span>
        </div>
        <div v-show="show" key="1" class="welfare" data-index="1">
          <img class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/image-23.png" alt="">
          <span class="text-[18px] mt-[25px]">员工激励</span>
        </div>
        <div v-show="show" key="2" class="welfare" data-index="2">
          <img class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/image-24.png" alt="">
          <span class="text-[18px] mt-[25px]">年节福利</span>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.zuimeidianying {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  margin-bottom: 70px;
  flex-direction: column;

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }

  .intro {
    color: #666666;
    font-size: 18px;
    font-weight: 500;
  }

  >.logo {
    width: 172px;
    height: 52px;
    margin: 0 auto 53px auto;
  }

  .content {
    gap: 46px;
    display: flex;
    position: relative;
    min-height: 400px;

    .img {
      width: 529px;
      height: 400px;
    }

    .float-card {
      right: 0;
      width: 745px;
      height: 158px;
      bottom: 30px;
      display: flex;
      align-items: center;
      position: absolute;
      background: #FFFFFF;
      box-shadow: 0px 0px 18px 0px rgba(159, 159, 159, 0.18);

      .item {
        flex: 1;
        gap: 20px;
        display: flex;
        flex-shrink: 0;
        position: relative;
        align-items: center;
        flex-direction: column;

        &::after {
          right: 0;
          width: 1px;
          height: 48px;
          content: '';
          position: absolute;
          background-color: #CCCCCC;
        }

        &:last-child::after {
          content: none;
        }
      }
    }
  }

  .welfare {
    opacity: 0;
    display: flex;
    align-items: center;
    flex-direction: column;

    .logo {
      width: 120px;
      height: 120px;
    }
  }

}
</style>
